<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>乐购商城分类</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="lib/iconfont/iconfont.css">
    <link rel="stylesheet" href="css/category.css">
</head>
<body>
    <!-- 头部 -->
    <header class="header">
        <div class="search">
            <span class="iconfont icon-arrow-left" id="return"></span>
            <div class="sousuo">
                <span class="iconfont icon-sousuo"></span>
                <input type="search" placeholder="程序员假发" id="searchframe">
            </div>
        </div>
    </header>
    <!-- 主要内容 -->
    <main>
        <ul class="nav fs14">
            <li class="active"><a href="#hot">热门推荐</a></li>
            <li><a href="#phone">手机数码</a></li>
            <li><a href="#home">家用电器</a></li>
            <li><a href="#computer">电脑办公</a></li>
            <li>计生情趣</li>
            <li>美妆护肤</li>
            <li>个护清洁</li>
            <li>汽车生活</li>
            <li>乐购超市</li>
            <li>户外运动</li>
            <li>图书影像</li>
            <li>酒水饮料</li>
        </ul>
        <div class="con">
            <p id="hot">热门推荐</p>
            <ul>
                <li>
                    <a href="#">
                        <img src="./images/cagegory-img01.png" alt="">
                        <p>手机</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./images/cagegory-img02.png" alt="">
                        <p>手机</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./images/cagegory-img03.png" alt="">
                        <p>手机</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./images/cagegory-img04.png" alt="">
                        <p>手机</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./images/cagegory-img05.png" alt="">
                        <p>手机</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./images/cagegory-img06.png" alt="">
                        <p>手机</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./images/cagegory-img07.png" alt="">
                        <p>手机</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./images/cagegory-img08.png" alt="">
                        <p>手机</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./images/cagegory-img09.png" alt="">
                        <p>手机</p>
                    </a>
                </li>
            </ul>
            <p id="phone">手机数码</p>
            <ul>
                <li>
                    <a href="#">
                        <img src="./images/cagegory-img01.png" alt="">
                        <p>手机</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./images/cagegory-img02.png" alt="">
                        <p>手机</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./images/cagegory-img03.png" alt="">
                        <p>手机</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./images/cagegory-img04.png" alt="">
                        <p>手机</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./images/cagegory-img05.png" alt="">
                        <p>手机</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./images/cagegory-img06.png" alt="">
                        <p>手机</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./images/cagegory-img07.png" alt="">
                        <p>手机</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./images/cagegory-img08.png" alt="">
                        <p>手机</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./images/cagegory-img09.png" alt="">
                        <p>手机</p>
                    </a>
                </li>
            </ul>
            <p id="home">家用电器</p>
            <ul>
                <li>
                    <a href="#">
                        <img src="./images/cagegory-img01.png" alt="">
                        <p>手机</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./images/cagegory-img02.png" alt="">
                        <p>手机</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./images/cagegory-img03.png" alt="">
                        <p>手机</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./images/cagegory-img04.png" alt="">
                        <p>手机</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./images/cagegory-img05.png" alt="">
                        <p>手机</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./images/cagegory-img06.png" alt="">
                        <p>手机</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./images/cagegory-img07.png" alt="">
                        <p>手机</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./images/cagegory-img08.png" alt="">
                        <p>手机</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./images/cagegory-img09.png" alt="">
                        <p>手机</p>
                    </a>
                </li>
            </ul>
            <p id="computer">电脑办公</p>
            <ul>
                <li>
                    <a href="#">
                        <img src="./images/cagegory-img01.png" alt="">
                        <p>手机</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./images/cagegory-img02.png" alt="">
                        <p>手机</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./images/cagegory-img03.png" alt="">
                        <p>手机</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./images/cagegory-img04.png" alt="">
                        <p>手机</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./images/cagegory-img05.png" alt="">
                        <p>手机</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./images/cagegory-img06.png" alt="">
                        <p>手机</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./images/cagegory-img07.png" alt="">
                        <p>手机</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./images/cagegory-img08.png" alt="">
                        <p>手机</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./images/cagegory-img09.png" alt="">
                        <p>手机</p>
                    </a>
                </li>
            </ul>
        </div>
    </main>
    <!-- 底部 -->
    <footer id="footer">
            <ul>
                <li>
                    <a href="index.html">
                        <span class="iconfont icon-ziyuan"></span>
                        <p class="fs12">首页</p>
                    </a>
                </li>
                <li>
                    <a href="category.html">
                        <span class="iconfont icon-fenlei"></span>
                        <p class="fs12">分类</p>
                    </a>
                </li>
                <li>
                    <a href="shoppingcart.html">
                        <span class="iconfont icon-gouwuche"></span>
                        <p class="fs12">购物车</p>
                    </a>
                </li>
                <li>
                    <a href="my.html">
                        <span class="iconfont icon-wode"></span>
                        <p class="fs12">我的</p>
                    </a>
                </li>
            </ul>
    </footer>
    <script src="lib/jquery/jquery.js"></script>
    <script src="js/category.js"></script>
</body>
</html>